<template>
	<view class="cu-modal" :class="isShow ? 'show' : '' ">
		<view class="cu-dialog" style="width:710rpx;">
			<view class="cu-bar bg-white justify-end">
				<view class="content">数字转换</view>
				<view class="action" @tap.stop="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view style="padding:0;">
				<view class="cu-list grid col-5">
					<view class="cu-item" style="padding:5rpx 10rpx" v-for="item in numCaseList" :key="item.num">
						<text class="text-sm" style="margin-top:0">{{item.num}}</text>
						<text class="text-sm" style="margin-top:0">{{item.low}}/{{item.upper}}</text>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">数字</view>
					<input v-model="convertNum" placeholder="输入要转换的数字" type="number" name="input"></input>
					<text class='cuIcon-close text-red' @click="clearConvertNum"></text>
				</view>
				<radio-group class="block" @change="RadioChange">
					<view class="flex">
						<view class="cu-form-group convert_wrap_item" style="border:none">
							<view class="title text-sm">大写</view>
							<radio :class="convertType=='encodeB'?'checked':''" :checked="convertType=='encodeB'?true:false" value="encodeB"></radio>
						</view>
						<view class="cu-form-group convert_wrap_item" style="border:none">
							<view class="title text-sm">金额</view>
							<radio :class="convertType=='toMoney'?'checked':''" :checked="convertType=='toMoney'?true:false" value="toMoney"></radio>
						</view>
						<view class="cu-form-group convert_wrap_item" style="border:none">
							<view class="title text-sm">小写</view>
							<radio :class="convertType=='encodeS'?'checked':''" :checked="convertType=='encodeS'?true:false" value="encodeS"></radio>
						</view>
					</view>
				</radio-group>
				<view class="cu-list menu" v-if="convertResultNum">
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">转换结果</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-green">{{convertResultNum}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
					<button class="cu-btn line-green text-green margin-left" v-if="convertResultNum" @tap="copyConvertNum">复制</button>
					<button class="cu-btn bg-green margin-left" @tap="startConvertNum">转换</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var Nzh = require("nzh/cn");
	export default {
		props:{

		},

		data() {
			return {
				numCaseList:[
					{
						num:0,
						upper:"零",
						low: "〇"
					},{
						num:1,
						upper:"壹",
						low: "一"
					},{
						num:2,
						upper:"贰",
						low: "二"
					},{
						num:3,
						upper:"叁",
						low: "三"
					},{
						num:4,
						upper:"肆",
						low: "四"
					},{
						num:5,
						upper:"伍",
						low: "五"
					},{
						num:6,
						upper:"陆",
						low: "六"
					},{
						num:7,
						upper:"柒",
						low: "七"
					},{
						num:8,
						upper:"捌",
						low: "八"
					},{
						num:9,
						upper:"玖",
						low: "九"
					},{
						num:10,
						upper:"拾",
						low: "十"
					},{
						num:100,
						upper:"壹佰",
						low: "一百"
					},{
						num:1000,
						upper:"壹仟",
						low: "一千"
					},{
						num:10000,
						upper:"壹万",
						low: "一万"
					},{
						num:100000000,
						upper:"一亿",
						low: "壹亿"
					}
				],
				isShow: false,
				convertType: "encodeB",
				convertNum: "",
				convertResultNum: ""
			}
		},
		methods:{
			showModal() {
				this.isShow = true;
				this.eventBus.$emit("dlgChange", "show");
			},
			hideModal() {
				this.isShow = false;
				this.eventBus.$emit("dlgChange", "hidden");
			},
			
			/**
			 * 清除表单
			 */
			clearConvertNum() {
				this.convertNum = "";
				this.convertResultNum = "";
			},
			
			/**
			 * 转换类型
			 */
			RadioChange(e) {
				this.convertType = e.detail.value;
				if(this.convertNum && /\d+\.?\d+/.test(this.convertNum)) {
					this.convertResultNum = Nzh[this.convertType](this.convertNum);
				}
			},
			
			/**
			 * 转换数字
			 */
			startConvertNum() {
				if(!this.convertNum || !/\d+\.?\d+/.test(this.convertNum)) {
					uni.showToast({
						title: "请输入有效数字",
						icon: "none"
					})
					return;
				}
				console.log("执行转换:",Nzh,this.convertType,this.convertNum);
				this.convertResultNum = Nzh[this.convertType](this.convertNum);
			},
			
			/**
			 * 复制转换结要到剪贴板
			 */
			copyConvertNum() {
				let convertResultNum = this.convertResultNum;
				uni.setClipboardData({
					data:convertResultNum,
					success() {
						uni.showToast({
							icon:"none",
							title:"转换结果复制成功"
						})
					}
				})
			}
			
		}
	}
</script>

<style>
.convert_wrap_item{
	flex:1;
}
</style>
